<template>
    <div class="app-container">
        <div class="block">
            <el-row>
                <h2>商户注册</h2>
                <el-steps :active="active" simple>
                    <el-step title="商铺信息" icon="el-icon-edit"></el-step>
                    <el-step title="详细信息" icon="el-icon-info"></el-step>
                    <el-step title="证件上传" icon="el-icon-upload"></el-step>
                    <el-step title="信息登记" icon="el-icon-position"></el-step>
                </el-steps>
                <el-col :span="8" :offset="6" style="margin-top: 80px">
                    <el-form :model="form" :rules="rules" ref="form" label-width="120px">
                        <div v-show="active == 1">
                            <el-form-item label="商家登录帐号" prop="loginName">
                                <el-input v-model="form.loginName" :minlength="5"  :maxlength="11" placeholder="请输入商家登录帐号"
                                          clearable/>
                            </el-form-item>
                            <el-form-item label="商家登录密码" prop="loginPwd">
                                <el-input v-model="form.loginPwd" type="password" :minlength="6" maxlength="20"
                                          placeholder="请输入商家登录密码"
                                          show-password clearable/>
                            </el-form-item>
                            <el-form-item label="店铺名称" prop="name">
                                <el-input v-model="form.name" placeholder="请输入店铺名称"  clearable/>
                            </el-form-item>
                            <el-form-item label="联系电话" prop="phone">
                                <el-input v-model.number="form.phone" :minlength="11"  :maxlength="11" show-word-limit clearable
                                          placeholder="请输入联系电话"/>
                            </el-form-item>
                            <el-form-item label="餐厅地址" prop="address">
                                <el-input v-model="form.address" placeholder="请输入餐厅地址" clearable/>
                            </el-form-item>
                            <el-form-item label="餐厅公告" prop="publication">
                                <el-input v-model="form.publication" type="textarea" placeholder="请输入餐厅公告，示例：欢迎光临，用餐高峰请提前下单，谢谢！"
                                          :autosize="{minRows: 4, maxRows: 4}" />
                            </el-form-item>
                            <el-form-item label="服务理念" prop="aim">
                                <el-input v-model="form.aim" type="textarea" placeholder="请输入服务理念，示例：宾客至上，服务第一"
                                          :autosize="{minRows: 4, maxRows: 4}" />
                            </el-form-item>
                        </div>
                        <div v-show="active == 2">
                            <el-form-item label="店铺分类">
                                <el-cascader
                                    :options="categoryOptions"
                                    v-model="selectedCategory"
                                    :props="{ label: 'name',value: 'name' }"
                                    clearable
                                ></el-cascader>
                            </el-form-item>
                            <el-form-item label="店铺logo" prop="icon">
                                <image-upload v-model="form.icon" :limit="1"/>
                            </el-form-item>
                            <el-form-item label="送餐标识" prop="egress">
                                <el-select v-model="form.egress" placeholder="请选择送餐标识" clearable>
                                    <el-option
                                        v-for="dict in dict.type.hmy_shop_egress"
                                        :key="dict.value"
                                        :label="dict.label"
                                        :value="dict.value"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="营业时间" prop="openingHours">
                                <el-time-select
                                    placeholder="起始时间"
                                    v-model="form.startTime"
                                    :picker-options="{
                                                start: '05:30',
                                                step: '00:15',
                                                end: '23:30'
                                            }">
                                </el-time-select>
                                <el-time-select
                                    placeholder="结束时间"
                                    v-model="form.endTime"
                                    :picker-options="{
                                    start: '05:30',
                                    step: '00:15',
                                    end: '23:30',
                                    minTime: form.startTime
                                    }">
                                </el-time-select>
                            </el-form-item>
                            <div v-show="form.egress == 0 ">
                                <el-form-item label="配送费" prop="deliveryFee">
                                    <el-input-number v-model="form.deliveryFee" :min="0" :max="20" clearable placeholder="配送费" />
                                </el-form-item>
                                <el-form-item label="起送价" prop="serviceFee">
                                    <el-input-number v-model="form.serviceFee" :min="0" :max="800" clearable placeholder="起送价" />
                                </el-form-item>
                                <el-form-item label="地图位置坐标" prop="location">
                                    <el-input v-model="form.location" placeholder="请输入地图位置坐标"/>
                                </el-form-item>
                            </div>
                        </div>
                        <div v-show="active == 3">
                            <el-form-item label="营业执照图片" prop="businessLicenseImage">
                                <image-upload v-model="form.businessLicenseImage" :limit="1"/>
                            </el-form-item>
                            <el-form-item label="服务许可证图片" prop="cateringServiceLicenseImage">
                                <image-upload v-model="form.cateringServiceLicenseImage" :limit="1"/>
                            </el-form-item>
                            <el-form-item label="餐厅简介(视频)" prop="introduction">
                                <el-upload :class="uploadClass" :headers="headers" :action="uploadAction" :show-file-list="false" :on-success="handleVideoSuccess" :before-upload="beforeUploadVideo" :on-progress="uploadVideoProcess">
                                    <video v-if="form.introduction != null && form.introduction !='' && videoFlag == false" :src="baseUrl+form.introduction" class="avatar" controls="controls">您的浏览器不支持视频播放</video>
                                    <i v-else-if="form.introduction == null && videoFlag == false" class="el-icon-plus"></i>
                                    <el-progress v-if="videoFlag == true" type="circle" :percentage="videoUploadPercent" style="margin-top:30px;"></el-progress>
                                </el-upload>
                                <p style="font-size: 12px;color: #606266; ">请上传大小不超过<b style="color: #f56c6c">20MB</b>格式为<b style="color: #f56c6c">mp4/ogg/flv/avi/wmv/rmvb</b>的文件</p>
                            </el-form-item>
                        </div>
                        <div v-show="active == 4">
                            <el-form-item label="法人姓名" prop="realName">
                                <el-input v-model="hmyShopsInfo.realName" placeholder="请输入法人姓名" :minlength="2" clearable/>
                            </el-form-item>
                            <el-form-item label="法人手机号" prop="mobile">
                                <el-input v-model.number="hmyShopsInfo.mobile" :minlength="11" :maxlength="11" show-word-limit clearable
                                          placeholder="请输入法人手机号"/>
                            </el-form-item>
                            <el-form-item label="法人身份证号" prop="idCard">
                                <el-input v-model="hmyShopsInfo.idCard" :minlength="18" :maxlength="18" show-word-limit placeholder="请输入法人身份证号" clearable/>
                            </el-form-item>
                            <el-form-item label="身份证正面照片" prop="idcardFront">
                                <image-upload v-model="hmyShopsInfo.idcardFront" :limit="1"/>
                            </el-form-item>
                            <el-form-item label="身份证背面照片" prop="idcardBack">
                                <image-upload v-model="hmyShopsInfo.idcardBack" :limit="1"/>
                            </el-form-item>
                            <el-form-item label="开户名称" prop="bankName">
                                <el-input v-model="hmyShopsInfo.bankName" placeholder="请输入开户名称：张三" clearable/>
                            </el-form-item>
                            <el-form-item label="开户银行" prop="bankType">
                                <el-input v-model="hmyShopsInfo.bankType" placeholder="请输入开户银行：中国银行古田支行" clearable/>
                            </el-form-item>
                            <el-form-item label="开户账号" prop="bankCard">
                                <el-input v-model="hmyShopsInfo.bankCard" :minlength="14" :maxlength="23" placeholder="请输入开户账号：4430 2100 0182 536" clearable/>
                            </el-form-item>
                        </div>
                    </el-form>
                </el-col>
                <el-col :span="8" :offset="8" style="margin-top: 50px">
                    <el-checkbox v-show="active == 4" v-model="rememberMe">
                        <p style="font-size: 12px;color: #606266; ">你已阅读并同意<a style="color: #576b95" href="https://www.baidu.com" target="_blank" >《微信公众平台服务协议》</a>及<a style="color: #576b95" href="https://www.baidu.com">《微信小程序平台服务条款》</a></p>
                    </el-checkbox>
                    <div>
                        <el-button type="primary" v-if="active < 4" style="margin-top: 12px" @click="next">下一步</el-button>
                        <el-button type="primary" v-show="active == 4" :disabled="!rememberMe"
                                   v-hasPermi="['hmy:shops:add']"
                                   @click="submitForm">立即注册</el-button>
                        <el-button type="primary" v-if="active > 1" style="margin-top: 12px" @click="pre">上一步</el-button>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import {listCategories} from "@/api/hmy/categories";
import {getToken} from "@/utils/auth";
import {addShops} from "@/api/hmy/shops";
import {validateBankCard} from "@/utils/utils";

export default {
    dicts: ['hmy_shop_apply_status', 'hmy_shop_open_status', 'hmy_shop_status', 'hmy_shop_egress', 'hmy_shop_is_open', 'hmy_shop_passed'],
    data() {
        return {
            //默认第一步
            active: 4,
            videoFlag:false,
            rememberMe:false,
            // 表单参数
            form: {
                deliveryFee: 0,
                serviceFee: 0,
                egress:"餐厅",
                startTime:"09:30",
                endTime:"22:30",
            },
            baseUrl: process.env.VUE_APP_BASE_API,
            uploadClass: "el-upload el-upload--picture-card",
            hmyShopsInfo:{},
            categoryOptions: [],
            uploadVideo: ["mp4", "avi", "mov"],
            headers: {
                Authorization: "Bearer " + getToken(),
            },
            videoUploadPercent:0,
            uploadAction: process.env.VUE_APP_BASE_API + "/common/upload",
            selectedCategory: ['快餐便当', '简餐'],
            // 表单校验
            rules: {
                loginName: [
                    {required: true, message: "商家登录帐号不能为空", trigger: "blur"},
                ],
                loginPwd: [
                    {required: true, message: "商家登录密码不能为空", trigger: "blur"}
                ],
                name: [
                    {required: true, message: "店铺名称不能为空", trigger: "blur"}
                ],
                icon: [
                    {required: true, message: "请上传餐厅logo", trigger: "blur"}
                ],
                openingHours: [
                    {required: true, message: "营业时间不能为空", trigger: "blur"}
                ],
                businessLicenseImage: [
                    {required: true, message: "请上传餐厅营业执照", trigger: "blur"}
                ],
                cateringServiceLicenseImage: [
                    {required: true, message: "请上传餐厅服务许可证", trigger: "blur"}
                ],
                introduction: [
                    {required: true, message: "请上传餐厅简介(视频)", trigger: "blur"}
                ],
                phone: [
                    {required: true, message: '请输入联系电话'},
                    {type: 'number', message: '电话号码必须是数字'},
                    {pattern: /^1(3|4|5|7|8|9)\d{9}$/, message: '手机号格式错误', trigger: 'blur' }
                ],
                address: [
                    {required: true, message: "餐厅地址不能为空", trigger: "blur"}
                ],
                realName: [
                    {required: true, message: "请输入法人姓名", trigger: "blur"},
                ],
                mobile: [
                    {required: true, message: "请输入法人手机号", trigger: "blur"},
                    {type: 'number', message: '电话号码必须是数字'},
                    {pattern: /^1(3|4|5|7|8|9)\d{9}$/, message: '手机号格式错误', trigger: 'blur' }
                ],
                idCard: [
                    {required: true, message: "请输入法人身份证号", trigger: "blur"}
                ],
                idcardFront: [
                    {required: true, message: "请上传法人身份证正面照片", trigger: "blur"}
                ],
                idcardBack: [
                    {required: true, message: "请上传法人身份证背面照片", trigger: "blur"}
                ],
                bankName: [
                    {required: true, message: "请输入开户名称", trigger: "blur"}
                ],
                bankType: [
                    {required: true, message: "请输入开户银行", trigger: "blur"}
                ],
                bankCard: [
                    {type:'string', required: true,trigger: "blur", message: "请输入开户账号", transform(value){
                        return value.replace(/\s+/g,"");
                    }},
                ]
            }
        }
    },
    watch:{
        ['hmyShopsInfo.bankCard'](val) {
            if (val != undefined) {
                this.$nextTick(() => {
                    this.hmyShopsInfo.bankCard = val.replace(/\D/g, '').replace(/....(?!$)/g, '$& ');
                });
            }
        }
    },
    created() {
        this.initData();
    },
    methods: {
        initData() {
            listCategories(this.queryParams).then(response => {
                this.categoryOptions = this.handleTree(response.data, "id", "pid");
            });
        },
        // 步骤条下一步的方法
        next() {
            if (this.active++ > 3) this.active = 1;
        },
        beforeUploadVideo(file) {
            const isLt20M = file.size / 1024 / 1024  < 20;
            if (['video/mp4', 'video/ogg', 'video/flv','video/avi','video/wmv','video/rmvb'].indexOf(file.type) == -1) {
                this.$message.error('请上传正确的视频格式');
                return false;
            }
            if (!isLt20M) {
                this.$message.error('上传视频大小不能超过20MB哦!');
                return false;
            }
        },
        uploadVideoProcess(event, file, fileList){
            this.videoFlag = true;
            this.videoUploadPercent = parseFloat(file.percentage.toFixed(0));
        },
        handleVideoSuccess(res, file) {
            this.videoFlag = false;
            this.videoUploadPercent = 0;
            console.log("res=========>",res);
            if(res.code == 200){
                this.uploadClass = "";
                this.form.introduction = res.fileName;
            }else{
                this.$message.error('视频上传失败，请重新上传！');
            }
        },
        // 步骤条上一步的方法
        pre() {
            if (this.active-- < 2) this.active = 1
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    this.form.hmyShopsInfo = this.hmyShopsInfo;
                    Object.assign(this.form, {
                        category: this.selectedCategory.join('/')
                    })
                    addShops(this.form).then(response => {
                        this.$modal.msgSuccess("新增成功");
                        this.open = false;
                        this.getList();
                    });
                }
            });
        },
    }
}
</script>
<style>
 .avatar{
     width: 320px;
     height: 200px;
 }
</style>
